<template>
	<view class="gd">
		<view class="gdbanner">
			<p>到账渠道</p>
			<view class="">
				<u-tabs :list="list1" @click="click"></u-tabs>
			</view>
		</view>
		<view class="form">
			<label>账户姓名</label>
			<input type="text" placeholder="请输入提现人姓名" v-model="username">
		</view>
		<view class="form">
			<label>提现账号</label>
			<input type="text"  placeholder="请输入提现账号" v-model="usercount">
		</view>
		<span style="margin-top: 20rpx;display: flex;">仅支持整数，72小时到账</span>
		<view class="bd">
			<p>提现金额</p>
			<view class="ss">
				<p style="font-size: 48rpx;">￥</p>
				<input placeholder="最低提现金额100元" type="number" v-model="money" maxlength="8">
			</view>
			<button class="btn" @click="god()">立即提现</button>
		</view>
		<u-popup :show="show" mode="center" :round="5" @close="close" @open="open">
			<view class="pops">
				<view class="c">
					<text>提现确认</text>
				</view>
				<view class="l">
					<p>提现金额:</p>
					<label>{{money}}</label>
				</view>
				<view class="l" style="margin-top: 30rpx;">
					<p>实际到账:</p>
					<label>{{money}}</label>
				</view>
				<view class="r">
					<p @click='close()'>我再想想</p>
					<label @click="txian()" for="">确认提现</label>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: '',
				show: false,
				username: '',
				usercount: '',
				type: 'zfb',
				list1: [{
					name: '支付宝提现',
				}, {
					name: '微信提现',
				}, ],
				phone: ''
			}
		},
		onLoad() {
			this.$http.post('api/user/detail').then(res => {
				console.log(res)
				this.phone = res.phone
				console.log(res.phone)
			});
		},
		methods: {
			open() {

			},
			god() {
				if (this.money == '') {
					uni.showToast({
						title: '提现金额不能为空！',
						icon: 'none'
					})
					return false
				}
				this.show = true
			},
			close() {
				this.show = !this.show
			},
			click(e) {
				if (e.name == '支付宝提现') {
					this.type = 'zfb'
					return false
				} else if (e.name == '微信提现') {
					this.type = 'wx'
					return false
				}
			},
			txian() {
				if (this.type = 'wx') {
					this.$http.post('api/user/withdraw', {
						number: this.money,
						wx_username: this.username,
						wx_account: this.usercount,
						phone: this.phone
					}).then(res => {
						uni.showToast({
							title: '提现成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					}).catch(
						uni.showToast({
							title: '提现失败',
							icon: 'none'
						})
					)
				} else if (this.type == 'zfb') {
					this.$http.post('api/user/withdraw', {
						number: this.money,
						alipay_username: this.username,
						alipay_account: this.usercount,
						phone: this.phone
					}).then(res => {
						uni.showToast({
							title: '提现成功'
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					}).catch(
						uni.showToast({
							title: '提现失败',
							icon: 'none'
						})
					)
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.gd {
		height: 1500rpx;
		background-color: rgb(245, 245, 245);
		font-size: 24rpx;

		span {
			margin-left: 212rpx;
			color: #999;
		}
	}

	.gdbanner {
		padding: 30rpx;
		display: flex;
		align-items: center;

		p {
			margin-right: 50rpx;
		}
	}

	.bd {
		margin: 30rpx;
		padding: 30rpx;
		height: 310rpx;
		background-color: white;
		border-radius: 20rpx;

		p {
			font-size: 26rpx;
		}
	}

	.ss {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #F5F5F5;

		input {
			padding-left: 20rpx;
			font-size: 30rpx;
		}

	}

	.btn {
		width: 630rpx;
		height: 70rpx;
		line-height: 70rpx;
		color: white;
		font-size: 30rpx;
		margin-top: 50rpx;
		background: #07BC98;
		border-radius: 35rpx;

	}

	.pops {
		width: 690rpx;
		height: 286rpx;
		padding: 10rpx 20rpx;
		font-size: 28rpx;

		.c {
			text-align: center;
		}

		.l {
			text-align: left;
			display: flex;
			margin-top: 30rpx;

			label {
				color: #F97302;
				padding-left: 20rpx;
			}
		}

		.r {
			display: flex;
			margin-top: 40rpx;
			margin-left: 350rpx;

			p {
				width: 140rpx;
				height: 50rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				text-align: center;
				line-height: 50rpx;
			}

			label {
				width: 140rpx;
				height: 50rpx;
				background: #07BC98;
				border-radius: 10rpx;
				text-align: center;
				line-height: 50rpx;
				color: white;
				margin-left: 20rpx;
			}
		}
	}

	.form {
		display: flex;
		margin: 0 30rpx;
		text-align: left;
		padding: 20rpx 0;
		border-bottom: 1px solid #ccc;

		label {
			width: 140rpx;
			font-size: 32rpx;
			color: black;
		}

		input {
			width: 300rpx;
			margin-left: 3.0rpx;
		}
	}
</style>